<template>
  <div>
    <el-drawer
      :title="title"
      :visible.sync="open"
      direction="ttb"
      size="100%"
      :show-close="false"
      :wrapperClosable="false"
      custom-class="demo-drawer"
    >
      <div class="demo-drawer__content">
        <mavon-editor ref="mavonEditor" v-model="content" title="4396" :toolbars="markdownOption" @imgAdd="imgAdd"
                      @imgDel="imgDel"
                      style="min-height: 90%;height: 33em
;z-index: 1500"></mavon-editor>
        <div slot="demo-drawer__footer" style="float: right;margin-right: 1em;margin-top: 0.2em">
          <el-button :loading="buttonLoading" type="primary" @click="submit" :disabled="hasLook">确 定
          </el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import {mavonEditor} from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
import {upload, getPolicy} from '@/api/oss'
import Axios from 'axios'

export default {
  components: {mavonEditor},
  data() {
    return {
      open: false,
      buttonLoading: false,
      title: undefined,
      currentId: undefined,
      hasLook: false,
      content: undefined,
      markdownOption: {
        bold: true, // 粗体
        italic: true, // 斜体
        header: true, // 标题
        underline: true, // 下划线
        strikethrough: true, // 中划线
        mark: true, // 标记
        superscript: true, // 上角标
        subscript: true, // 下角标
        quote: true, // 引用
        ol: true, // 有序列表
        ul: true, // 无序列表
        link: true, // 链接
        imagelink: true, // 图片链接
        code: true, // code
        table: true, // 表格
        fullscreen: true, // 全屏编辑
        readmodel: true, // 沉浸式阅读
        htmlcode: true, // 展示html源码
        help: false, // 帮助
        /* 1.3.5 */
        undo: true, // 上一步
        redo: true, // 下一步
        trash: true, // 清空
        save: true, // 保存（触发events中的save事件）
        /* 1.4.2 */
        navigation: true, // 导航目录
        /* 2.1.8 */
        alignleft: true, // 左对齐
        aligncenter: true, // 居中
        alignright: true, // 右对齐
        /* 2.2.1 */
        subfield: true, // 单双栏模式
        preview: true, // 预览
      }
    }
  },
  methods: {
    openDrawer(title, hasLook, content) {
      this.title = title;
      this.hasLook = hasLook;
      this.content = content;
      this.open = true;
    },
    // 绑定@imgAdd event
    imgAdd(fileName, file) {
      //将图片上传到服务器.
      let formData = new FormData();
      formData.append('file', file);
      upload(formData).then(resp => {
        this.$refs.mavonEditor.$img2Url(fileName, resp.data.url);
      })
    },
    imgDel(fileName) {
    },
    submit() {
      this.buttonLoading = true;
      this.$emit("submitContentForm", this.content);
    },
    cancel() {
      this.buttonLoading = false;
      this.open = false;
    }
  },
}
</script>

<style scoped>
.v-note-help-wrapper {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1600;
  -webkit-transition: all 0.1s linear 0s;
  transition: all 0.1s linear 0s;
}
</style>
